<template>
  <div>
    <q-form class="sc-edit">
      <yq-table
        v-model:search="searchForm"
        v-model:table="tableOptions"
        v-model:initial="initialPagination"
        :topAdd="false"
        @onRequest="onRequest"
        @search="getList"
        :isStatus="'tag_state'"
      >
        <template v-slot:yq_table_body="props">
          <q-tr :props="props.props">
            <q-td key="apply_id" :props="props.props">
              <span>{{ props.props.row.apply_id }}</span>
            </q-td>

            <q-td key="company_name" :props="props.props">
              <span>{{ props.props.row.company_name }}</span>
            </q-td>

            <q-td key="user_name" :props="props.props">
              <span>{{ props.props.row.user_name }}</span>
            </q-td>

            <q-td key="address_detail" :props="props.props">
              <span>{{ props.props.row.address_detail }}</span>
            </q-td>

            <q-td key="company_phone" :props="props.props">
              <span>{{ props.props.row.company_phone }}</span>
            </q-td>

            <q-td key="company_type" :props="props.props">
              <span>{{
                props.props.row.tag_state == 0 ? '私企' : '个体'
              }}</span>
            </q-td>

            <q-td key="apply_status" :props="props.props">
              <span>{{
                props.props.row.apply_status == 0
                  ? '已提交申请'
                  : props.props.row.apply_status == 1
                  ? '审核成功'
                  : '审核失败'
              }}</span>
            </q-td>

            <q-td key="operation" :props="props.props">
              <q-btn
                flat
                round
                dense
                class="q-mx-xs"
                color="primary"
                icon="account_box"
                v-permission="'/shop/Apply:examine'"
              >
                <q-tooltip>审核</q-tooltip>
                <q-menu
                  transition-show="jump-up"
                  transition-hide="jump-down"
                  content-class="text-center"
                  self="bottom left"
                  anchor="top left"
                  :offset="[60, 5]"
                >
                  <div class="q-px-sm q-pt-md">
                    <q-icon name="info" color="warning" class="q-mr-sm" />
                    是否批准通过 ?
                  </div>
                  <div class="q-gutter-x-sm q-pt-sm q-pb-md">
                    <q-btn
                      color="grey-6"
                      unelevated
                      class="no-border-radius text-body2"
                      padding="2px sm"
                      dense
                      label="拒绝"
                      @click="examine(2, props.props.row)"
                      v-close-popup
                    ></q-btn>
                    <q-btn
                      color="primary"
                      unelevated
                      class="no-border-radius text-body2"
                      padding="2px sm"
                      dense
                      label="通过"
                      @click="examine(1, props.props.row)"
                      v-close-popup
                    ></q-btn>
                  </div>
                </q-menu>
              </q-btn>

              <q-btn
                flat
                round
                dense
                color="primary"
                icon="edit"
                @click="edit(props.props.row.id, props.props.row)"
                v-permission="'/shop/Apply:detail'"
              >
                <q-tooltip>编辑</q-tooltip>
              </q-btn>
            </q-td>
          </q-tr>
        </template>
      </yq-table>
    </q-form>
    <yq-dialog v-model:lockDialog="lockDialog" :title="title">
      <template v-slot:yq_dialog_body
        ><apply-dialog :form="formData" @backList="getList"
      /></template>
    </yq-dialog>
  </div>
</template>

<script setup lang="ts">
import { applyData, pageInit } from '../mocklist';
import { applyList, applyDetail, applyExamine } from '@/api/shop';
import { Ref } from 'vue';
import { useQuasar } from 'quasar';
import ApplyDialog from './ApplyDialog.vue';
import { cloneDeep } from 'lodash-es';

interface formProps {
  apply_id?: number; //ID
  company_name?: string; //店铺公司名称
  user_name?: string; //店主用户名
  province_id?: string; //省
  city_id?: string; //城市
  area_id?: string; //区
  district_id?: string; //街道
  address_detail?: string; //公司详细地址
  company_phone?: string; //公司电话
  company_type?: string; //类型:私企.个体.外企.中外合资
}

const tableOptions = reactive({
  tableLoading: false,
  ...applyData,
});

const initialPagination = ref(cloneDeep(pageInit));
const lockDialog = ref(false);
const treeDialog = ref(false);
const title = ref('新建标签');
const formData: Ref<formProps> = ref({});
const $q = useQuasar();
const searchForm = reactive({
  keywords: '',
  search: {
    tag_state: '',
  },
  dateMin: {
    created_at: '',
  },
  dateMax: {
    created_at: '',
  },
});
//添加
const add = () => {
  title.value = '新建标签';
  formData.value = {};
  lockDialog.value = true;
};

const query = () => {
  getList();
};

const onRequest = (props: any) => {
  const { page, rowsPerPage, rowsNumber } = props.pagination;
  initialPagination.value.page = page;
  initialPagination.value.rowsPerPage = rowsPerPage;
  initialPagination.value.per_page = rowsPerPage;
  initialPagination.value.rowsNumber = rowsNumber;
  getList();
};

//编辑
const edit = async (index: number, item: any) => {
  lockDialog.value = true;
  title.value = '申请详情';
  const detail: any = await applyDetail({ apply_id: item.apply_id });
  let data = cloneDeep(detail.data);
  formData.value = data;
};
//审批
const examine = async (index: number, item: any) => {
  const res: any = await applyExamine({
    apply_id: item.apply_id,
    apply_status: index,
    apply_message: index == 1 ? '审核通过' : '审核不通过',
  });
  if (res.code == 200) {
    $q.notify({
      color: 'white',
      textColor: 'positive',
      icon: 'check_circle',
      position: 'top',
      message: res.msg,
    });
    getList();
  }
};

//删除
const deleteData = async (index: number, item: any) => {
  // const res: any = await goodsTagDelete({ id: item.id });
  // if (res.code == 200) {
  //   $q.notify({
  //     color: 'white',
  //     textColor: 'positive',
  //     icon: 'check_circle',
  //     position: 'top',
  //     message: res.msg,
  //   });
  //   getList();
  // }
};

//获取列表
const getList = async () => {
  lockDialog.value = false;
  treeDialog.value = false;
  tableOptions.tableLoading = true;
  const body = cloneDeep(Object.assign(initialPagination.value, searchForm));
  const res: any = await applyList(body);
  tableOptions.tableLoading = false;
  tableOptions.columnDatas = res.data.data;
  initialPagination.value.rowsNumber = res.data.total;
};
onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss">
.sc-design .sc-edit .q-item__section--side {
  padding-right: 0;
}

.q-field--dense .q-field__control {
  padding: 0 5px;
  height: 28px;
  .q-field__marginal {
    height: 28px;
  }
}
.q-field--auto-height .q-field--dense .q-field__control,
.q-field__native {
  min-height: 28px;
}
.q-gutter-x-sm,
.q-gutter-sm {
  margin-left: 15px;
}
::v-deep(.my-special-class) {
  height: 48px;
  background: #fafafa;
}
::v-deep(.my-special-class th) {
  font-size: 16px;
}
</style>
